<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-if="this.queryParams.shopType == '婚纱摄影'">添加风格</el-button>
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddhslf"
                    v-if="this.queryParams.shopType == '婚纱礼服'">添加风格</el-button>
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddhlch"
                    v-if="this.queryParams.shopType == '婚礼策划'">添加风格</el-button>
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddyht"
                    v-if="this.queryParams.shopType == '婚宴酒店'">添加宴会厅种类</el-button>
            </el-col>
        </el-row>
        <!-- 婚纱摄影列表 -->
        <el-table :data="list">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="风格分类" align="center" prop="typename" />
            <el-table-column label="封面首图" align="center">
                <template slot-scope="scope" width="80px">
                    <el-image :src="scope.row.typepic" alt="" weight="10" style="width: 80px; height: 80px;"
                        :preview-src-list="srcList" @click="look(scope.row)"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="样片数量" align="center" prop="oid1num" v-if="this.queryParams.shopType == '婚纱摄影'">
                <template slot-scope="scope">
                    <el-button @click="chakanyp(scope.row)" type="text">{{ scope.row.oid1num }}<span
                            style="margin-left: 10px;">查看</span></el-button>
                </template>
            </el-table-column>
            <el-table-column label="样片数量" align="center" prop="oid1num" v-if="this.queryParams.shopType == '婚纱礼服'">
                <template slot-scope="scope">
                    <el-button @click="hslfyp(scope.row)" type="text">{{ scope.row.oid1num }}<span
                            style="margin-left: 10px;">查看</span></el-button>
                </template>
            </el-table-column>
            <el-table-column label="样片数量" align="center" prop="oid1num" v-if="this.queryParams.shopType == '婚礼策划'">
                <template slot-scope="scope">
                    <el-button @click="hlchyp(scope.row)" type="text">{{ scope.row.oid1num }}<span
                            style="margin-left: 10px;">查看</span></el-button>
                </template>
            </el-table-column>
            <el-table-column label="描述" align="center" prop="remark" v-if="this.queryParams.shopType == '婚宴酒店'" />
            <el-table-column label="客片数量" align="center" prop="oid2num" v-if="this.queryParams.shopType == '婚纱摄影'">
                <template slot-scope="scope">
                    <el-button @click="chakankp(scope.row)" type="text">{{ scope.row.oid2num }}<span
                            style="margin-left: 10px;">查看</span></el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button @click="yangpianadd(scope.row)" type="text" icon="el-icon-plus" size="small"
                        v-show="tjyp">添加样片</el-button>
                    <el-button @click="kepianadd(scope.row)" type="text" icon="el-icon-plus" v-show="isshow"
                        size="small">添加客片</el-button>
                    <el-button @click="hyjdchakan(scope.row)" type="text" icon="el-icon-view" v-show="hyjd"
                        size="small">查看</el-button>
                    <el-button @click="handleupdate(scope.row)" type="text" icon="el-icon-edit" size="small">修改</el-button>
                    <el-popconfirm title="是否确认删除整个系列？" @confirm="handledelete(scope.row)">
                        <el-button slot="reference" type="text" icon="el-icon-delete" size="small">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 婚纱摄影新增系列 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="150px">
                <el-form-item label="分类名称" prop="typename">
                    <el-input v-model="form.typename" placeholder="请输入分类名称" style="width: 180px;" />
                </el-form-item>
                <el-form-item label="封面首图" prop="typepic">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                        :on-progress="progress" name="fileName">
                        <img v-if="form.typepic" :src="form.typepic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="isShowJinDuTiao" type="circle" :percentage="percentage" :width="78"
                            class="jdt" />
                        <div slot="tip" class="el-upload__tip" style="color:#999999">上传图片大小为300px*402px</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="xinzeng">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 添加样片对话框 -->
        <el-dialog :title="title1" :visible.sync="open1" width="800px" append-to-body>
            <el-form ref="form1" :model="form1" :rules="rules" label-width="150px">
                <el-form-item label="系列名称" prop="name">
                    <el-input v-model="form1.name" placeholder="请输入名称" style="width: 180px;" />
                </el-form-item>
                <el-form-item label="系列首图" prop="pic" v-if="this.queryParams.shopType != '婚礼策划'">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
                        :show-file-list="false" :on-success="handleAvatar" :before-upload="AvatarUpload"
                        :on-progress="progress1" name="fileName">
                        <img v-if="form1.pic" :src="form1.pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="isShowJinDuTiao1" type="circle" :percentage="percentage1" :width="78"
                            class="jdt" />
                        <div slot="tip" class="el-upload__tip" style="color:#999999">上传图片大小为750px*1000px</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="详情图片" prop="picc" v-if="this.queryParams.shopType != '婚宴酒店'">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers" :multiple="true"
                        list-type="picture" :file-list="fileList" :on-success="handlePreview" :on-remove="handleRemove"
                        name="fileName">
                        <el-button size="small" type="primary">点击上传详情图片</el-button>
                        <div slot="tip" class="el-upload__tip">详情图片不能低于两张</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="形容" prop="hsTypeName" v-if="this.queryParams.shopType == '婚纱礼服'">
                    <el-input v-model="form1.hsTypeName" type="text" placeholder="请输入形容的内容五个两个字形容如长款,齐地"></el-input>
                </el-form-item>
                <el-form-item label="特征" prop="hsName" v-if="this.queryParams.shopType == '婚纱礼服'">
                    <el-input v-model="form1.hsName" type="text" placeholder="请输入形容的内容五个两个字特征"></el-input>
                </el-form-item>
                <el-form-item label="是否设为推荐" prop="tuijian" v-if="this.queryParams.shopType == '婚纱礼服'">
                    <template>
                        <el-radio-group v-model="form1.tuijian">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="yangpianxinzeng">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 添加客片对话框 -->
        <el-dialog :title="title2" :visible.sync="open2" width="800px" append-to-body>
            <el-form ref="form1" :model="form1" :rules="rules" label-width="150px">
                <el-form-item label="系列名称" prop="name">
                    <el-input v-model="form1.name" placeholder="请输入名称" style="width: 180px;" />
                </el-form-item>
                <el-form-item label="系列首图" prop="pic">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
                        :on-progress="progress1" :show-file-list="false" :on-success="handleAvatar"
                        :before-upload="AvatarUpload" name="fileName">
                        <img v-if="form1.pic" :src="form1.pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="isShowJinDuTiao1" type="circle" :percentage="percentage1" :width="78"
                            class="jdt" />
                        <div slot="tip" class="el-upload__tip" style="color:#999999">上传图片大小为750px*1000px</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="详情图片" prop="picc">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers" multiple
                        list-type="picture" :file-list="fileList" :on-success="handlePreview" :on-remove="handleRemove"
                        name="fileName">
                        <el-button size="small" type="primary">点击上传详情图片</el-button>
                        <div slot="tip" class="el-upload__tip">详情图片不能低于两张</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="kepianxinzeng">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 添加宴会厅种类对话框 -->
        <el-dialog :title="title3" :visible.sync="open3" width="800px" append-to-body>
            <el-form ref="form2" :model="form2" :rules="rules" label-width="150px">
                <el-form-item label="分类名称" prop="typename">
                    <el-input v-model="form2.typename" placeholder="请输入分类名称" style="width: 180px;" />
                </el-form-item>
                <el-form-item label="封面首图" prop="typepic">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
                        :on-progress="progress2" :show-file-list="false" :on-success="yhtSuccess" :before-upload="yhtUpload"
                        name="fileName">
                        <img v-if="form2.typepic" :src="form2.typepic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="isShowJinDuTiao2" type="circle" :percentage="percentage2" :width="78"
                            class="jdt" />
                        <div slot="tip" class="el-upload__tip" style="color:#999999">上传图片大小为750px*470px</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="描述" prop="remark">
                    <el-input v-model="form2.remark" placeholder="请输入最多桌数,层高" style="width: 180px;" />
                </el-form-item>
                <el-form-item label="详情图片" prop="picc">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
                        list-type="picture" :file-list="fileList" :on-success="yhtaSuccess" :on-remove="yhtaRemove" multiple
                        name="fileName">
                        <el-button size="small" type="primary">点击上传详情图片</el-button>
                        <div slot="tip" class="el-upload__tip">详情图片不能低于两张</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="xinzengyht">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 婚纱礼服新增款式 -->
        <el-dialog :title="title4" :visible.sync="open4" width="800px" append-to-body>
            <el-form ref="form4" :model="form4" :rules="rules" label-width="150px">
                <el-form-item label="分类名称" prop="typename">
                    <el-input v-model="form4.typename" placeholder="请输入分类名称" style="width: 180px;" />
                </el-form-item>
                <el-form-item label="封面首图" prop="typepic">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
                        :on-progress="progress3" :show-file-list="false" :on-success="hslfSuccess"
                        :before-upload="hslfUpload" name="fileName">
                        <img v-if="form4.typepic" :src="form4.typepic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="isShowJinDuTiao3" type="circle" :percentage="percentage3" :width="78"
                            class="jdt" />
                        <div slot="tip" class="el-upload__tip" style="color:#999999">上传图片大小为300px*418px</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="xinzenghslf">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 婚礼策划新增款式 -->
        <el-dialog :title="title5" :visible.sync="open5" width="800px" append-to-body>
            <el-form ref="form3" :model="form3" :rules="rules" label-width="150px">
                <el-form-item label="分类名称" prop="typename">
                    <el-input v-model="form3.typename" placeholder="请输入分类名称" style="width: 180px;" />
                </el-form-item>
                <el-form-item label="封面首图" prop="typepic">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
                        :on-progress="progress4" :show-file-list="false" :on-success="hlchSuccess"
                        :before-upload="hlchUpload" name="fileName">
                        <img v-if="form3.typepic" :src="form3.typepic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="isShowJinDuTiao4" type="circle" :percentage="percentage4" :width="78"
                            class="jdt" />
                        <div slot="tip" class="el-upload__tip" style="color:#999999">上传图片大小为630px*430px</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="xinzenghlch">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 修改款式对话框 -->
        <el-dialog :title="title6" :visible.sync="open6" width="800px" append-to-body>
            <el-form ref="form5" :model="form5" :rules="rules" label-width="150px">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="form5.typename" placeholder="请输入分类名称" style="width: 180px;" />
                </el-form-item>
                <el-form-item label="封面首图" prop="typepic">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
                        :on-progress="progress5" :show-file-list="false" :on-success="xiugaiSuccess"
                        :before-upload="xiugaiUpload" name="fileName">
                        <img v-if="form5.typepic" :src="form5.typepic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="isShowJinDuTiao5" type="circle" :percentage="percentage5" :width="78"
                            class="jdt" />
                    </el-upload>
                </el-form-item>
                <el-form-item label="描述" prop="remark" v-if="this.queryParams.shopType == '婚宴酒店'">
                    <el-input v-model="form5.remark" placeholder="请输入最多桌数,层高" style="width: 180px;" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="xiugai">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import { listget, addxilie, addyangpian, addkepian, addHSLFyangpian, addHLCHyangpian, addHYJDxilie, deletexilie, selectxiliexiangqing, updateOnexilie } from "@/api/business/zhuangxiu.js";
import { getToken } from '@/utils/auth'
export default {
    name:'zhuangxiu',
    data() {
        return {
            isShowJinDuTiao: false,
            isShowJinDuTiao1: false,
            isShowJinDuTiao2: false,
            isShowJinDuTiao3: false,
            isShowJinDuTiao4: false,
            isShowJinDuTiao5: false,
            percentage: 0,
            percentage1: 0,
            percentage2: 0,
            percentage3: 0,
            percentage4: 0,
            percentage5: 0,
            srcList: [],
            fileList: [],
            fileList1: [],
            isshow: true,
            show: true,
            tjyp: true,
            hyjd: true,
            url: process.env.VUE_APP_BASE_API + "/upload/fileUpload",
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            title: '',
            title1: '',
            title2: '',
            title3: '',
            title4: '',
            title5: '',
            title6: '',
            open: false,
            open1: false,
            open2: false,
            open3: false,
            open4: false,
            open5: false,
            open6: false,
            form: {
                typepic: '',
                typename: '',
                shopid: this.$route.query.shopid,
            },
            form1: {
                name: '',
                pic: '',
                picc: '',
                typeid: '',
                hsTypeName: '',
                hsName: '',
                tuijian: 0,
                shopid: this.$route.query.shopid,
            },
            form2: {
                typename: '',
                picc: '',
                typepic: '',
                shopid: this.$route.query.shopid,
                remark: ""
            },
            form3: {
                typepic: '',
                typename: '',
                shopid: this.$route.query.shopid,
            },
            form4: {
                typepic: '',
                typename: '',
                shopid: this.$route.query.shopid,
            },
            form5: {
                typepic: '',
                typename: '',
                shopid: this.$route.query.shopid,
                typeid: '',
                remark: ''
            },
            date: {
                typeid: ''
            },
            list: [],
            queryParams: {
                shopid: this.$route.query.shopid,
                shopType: this.$route.query.shopType,
            },
            rules: {
                typename: [{ required: true, message: "请输入分类名称", trigger: "blur" }, {
                    max: 10, message: '最多十个字', trigger: 'blur'
                }],
                typepic: [{ required: true, message: "请输入分类图片", trigger: "change" }],
                name: [{ required: true, message: "请输入名称", trigger: "blur" }],
                pic: [{ required: true, message: "请输入图片", trigger: "change" }],
                picc: [{ required: true, message: "请上传详情图片", trigger: "change" },
                { min: 2, message: '最少上传两张图片', trigger: "change" }],
                hsTypeName: [{ required: true, message: "请输入形容内容", trigger: "blur" }, {
                    max: 14, message: '长度为5条每条两个字英文,间隔开', trigger: 'blur'
                }],
                hsName: [{ required: true, message: "请输入特征内容", trigger: "blur" }, {
                    max: 14, message: '长度为5条每条两个字英文,间隔开', trigger: 'blur'
                }]
            },
            date1: {
                shopid: this.$route.query.shopid,
                typeid: ''
            }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        reset() {
            this.form = {
                typepic: '',
                typename: '',
                shopid: this.$route.query.shopid,
            },
                this.form1 = {
                    name: '',
                    pic: '',
                    picc: '',
                    typeid: '',
                    hsTypeName: '',
                    hsName: ''
                },
                this.form2 = {
                    typename: '',
                    picc: '',
                    typepic: '',
                    shopid: this.$route.query.shopid,
                    remark: ""
                },
                this.form3 = {
                    typepic: '',
                    typename: '',
                    shopid: this.$route.query.shopid,
                },
                this.form4 = {
                    typepic: '',
                    typename: '',
                    shopid: this.$route.query.shopid,
                }
            // this.$refs["form"].resetFields();
        },
        // 获取列表
        async getList() {
            let res = await listget(this.queryParams);
            this.list = res.data.data;
            if (this.queryParams.shopType == "婚纱摄影") {
                this.isshow = true;
            } else {
                this.isshow = false;
            }
            if (this.queryParams.shopType == "婚纱礼服") {
                this.show = true;
            } else {
                this.show = false;
            }
            if (this.queryParams.shopType != "婚宴酒店") {
                this.tjyp = true;
            } else {
                this.tjyp = false;
            }
            if (this.queryParams.shopType == "婚宴酒店") {
                this.hyjd = true;
            } else {
                this.hyjd = false;
            }
        },
        // 新增按钮操作
        handleAdd() {
            this.open = true;
            this.title = "增加风格";
            this.$nextTick(() => {
                this.$refs["form"].resetFields()
            })
        },
        // 上传头像
        handleAvatar(res, file) {
            this.form1.pic = res.data
            // this.shoplogo = URL.createObjectURL(file.raw);
            this.isShowJinDuTiao1 = false;
            this.percentage1 = 0;
        },
        AvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            this.isShowJinDuTiao1 = true;
        },
        handleAvatarSuccess(res, file) {
            this.form.typepic = res.data;
            this.isShowJinDuTiao = false;
            this.percentage = 0;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            this.isShowJinDuTiao = true;
        },
        progress(event, file, fileList) {
            let num = ((event.loaded / event.total) * 100) | 0;
            this.percentage = num;
        },
        progress1(event, file, fileList) {
            let num = ((event.loaded / event.total) * 100) | 0;
            this.percentage1 = num;
        },
        progress2(event, file, fileList) {
            let num = ((event.loaded / event.total) * 100) | 0;
            this.percentage2 = num;
        },
        progress3(event, file, fileList) {
            let num = ((event.loaded / event.total) * 100) | 0;
            this.percentage3 = num;
        },
        progress4(event, file, fileList) {
            let num = ((event.loaded / event.total) * 100) | 0;
            this.percentage4 = num;
        },
        progress5(event, file, fileList) {
            let num = ((event.loaded / event.total) * 100) | 0;
            this.percentage5 = num;
        },
        // 上传截图
        handleRemove(file, fileList) {
            this.fileList = fileList;
            let List = [];
            this.fileList.forEach(item => {
                List.push(item.response.data)
            });
            this.form1.picc = List.join(',');
            this.form1.pic.push(this.form1.picc);
        },
        handlePreview(response, file, fileList) {
            this.fileList = fileList;
            let List = [];
            this.fileList.forEach(item => {
                if(item.response!=undefined){
                    List.push(item.response.data)
                }
            });
            this.form1.picc = List.join(',');
            this.form1.pic.push(this.form1.picc);
        },
        // 新增确定按钮
        xinzeng() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    addxilie(this.form).then(response => {
                        this.reset();
                        this.$modal.msgSuccess(response.data.msg);
                        this.open = false;
                        this.getList();
                    })
                }
            })
        },
        // 取消按钮操作
        cancel() {
            this.reset();
            this.fileList = [];
            this.open = false;
            this.open1 = false;
            this.open5 = false;
            this.open6 = false;
            this.open4 = false;
            this.open2 = false;
            this.open3 = false;
        },
        // 添加样片
        yangpianadd(row) {
            this.open1 = true;
            this.title = "添加样片";
            this.form1.typeid = row.typeid;
            this.$nextTick(() => {
                this.$refs["form1"].resetFields()
            })
        },
        yangpianxinzeng() {
            if (this.queryParams.shopType == "婚纱摄影") {
                this.$refs["form1"].validate(valid => {
                    if (valid) {
                        if (this.fileList.length < 2) {
                            this.$modal.msgError('详情图片不能低于两张!');
                        } else {
                            addyangpian(this.form1).then(response => {
                                this.form1 = {
                                    name: '',
                                    pic: '',
                                    picc: '',
                                    typeid: '',
                                    hsTypeName: '',
                                    hsName: ''
                                },
                                    this.fileList = [];
                                this.open1 = false;
                                this.$modal.msgSuccess(response.data.msg);
                                this.getList();
                            })
                        }

                    }
                })
            } else if (this.queryParams.shopType == "婚纱礼服") {
                this.$refs['form1'].validate(valid => {
                    if (valid) {
                        if (this.fileList.length < 2) {
                            this.$modal.msgError("详情图片不能低于两张!");
                            return false;
                        } else {
                            addHSLFyangpian(this.form1).then(response => {
                                this.form1 = {
                                    name: '',
                                    pic: '',
                                    picc: '',
                                    typeid: '',
                                    hsTypeName: '',
                                    hsName: ''
                                },
                                    this.fileList = [];
                                this.open1 = false;
                                this.$modal.msgSuccess(response.data.msg);
                                this.getList();
                            })
                        }

                    }
                })
            } else if (this.queryParams.shopType == "婚礼策划") {
                this.$refs['form1'].validate(valid => {
                    if (valid) {
                        if (this.fileList.length < 2) {
                            this.$modal.msgError('详情图片不能低于两张!');
                            return false;
                        } else {
                            addHLCHyangpian(this.form1).then(response => {
                                this.form1 = {
                                    name: '',
                                    pic: '',
                                    picc: '',
                                    typeid: '',
                                    hsTypeName: '',
                                    hsName: ''
                                },
                                    this.fileList = [];
                                this.open1 = false;
                                this.$modal.msgSuccess(response.data.msg);
                                this.getList();
                            })
                        }
                    }
                })
            }
        },
        // 添加客片
        kepianadd(row) {
            this.open2 = true;
            this.title = "添加客片";
            this.form1.typeid = row.typeid;
            this.$nextTick(() => {
                this.$refs["form1"].resetFields()
            })
        },
        kepianxinzeng() {
            this.$refs['form1'].validate(valid => {
                if (valid) {
                    if (this.fileList.length < 2) {
                        this.$modal.msgError('详情图片不能低于两张!');
                        return false;
                    } else {
                        addkepian(this.form1).then(response => {
                            this.form1 = {
                                name: '',
                                pic: '',
                                picc: '',
                                typeid: '',
                                hsTypeName: '',
                                hsName: ''
                            },
                                this.fileList = [];
                            this.open2 = false;
                            this.$modal.msgSuccess(response.data.msg);
                            this.getList();
                        })
                    }

                }
            })

        },
        // 添加宴会厅种类
        handleAddyht() {
            this.open3 = true;
            this.title3 = "添加宴会厅种类";
            this.$nextTick(() => {
                this.$refs["form2"].resetFields()
            })
        },
        xinzengyht() {
            this.$refs["form2"].validate(valid => {
                if (valid) {
                    if (this.fileList.length < 2) {
                        this.$modal.msgError('详情图片不能低于两张!');
                        return false;
                    } else {
                        // console.log(this.form2,'11111111');
                        addHYJDxilie(this.form2).then(response => {
                            this.form2 = {
                                typename: '',
                                picc: '',
                                typepic: '',
                                shopid: this.$route.query.shopid,
                                remark: ""
                            },
                                this.fileList = [];
                            this.$modal.msgSuccess(response.data.msg);
                            this.open3 = false;
                            this.getList();
                        })
                    }
                }
            })
        },
        // 上传头像
        yhtSuccess(res, file) {

            this.form2.typepic = res.data
            this.isShowJinDuTiao2 = false;
            this.percentage2 = 0;
            // this.shoplogo = URL.createObjectURL(file.raw);
        },
        yhtUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            this.isShowJinDuTiao2 = true;
        },
        // 上传截图
        yhtaRemove(file, fileList) {
            this.fileList1 = fileList;
            let List = [];
            this.fileList1.forEach(item => {
                List.push(item.response.data)
            });
            this.form2.picc = List.join(',')
        },
        yhtaSuccess(response, file, fileList) {
            this.fileList = fileList;
            let List = [];
            this.fileList.forEach(item => {
                List.push(item.response.data)
            });
            this.form2.picc = List.join(',');
        },
        // 婚纱礼服新增种类
        handleAddhslf() {
            this.open4 = true;
            this.title4 = "新增款式";
            this.$nextTick(() => {
                this.$refs["form4"].resetFields()
            })
        },
        xinzenghslf() {
            this.$refs["form4"].validate(valid => {

                if (valid) {

                    addxilie(this.form4).then(response => {
                        this.open4 = false;
                        this.getList();
                        this.form4 = {
                            typepic: '',
                            typename: '',
                            shopid: this.$route.query.shopid,
                        }
                    })
                }
            })
        },
        hslfSuccess(res, file) {
            this.form4.typepic = res.data
            this.isShowJinDuTiao3 = false;
            this.percentage3 = 0;
            // this.shoplogo = URL.createObjectURL(file.raw);
        },
        hslfUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            this.isShowJinDuTiao3 = true;
        },
        // 上传截图
        handleRemove(file, fileList) {
            this.fileList = fileList;
            let List = [];
            this.fileList.forEach(item => {
                List.push(item.response.data)
            });
            this.form1.picc = List.join(',')
        },
        handlePreview(response, file, fileList) {
            this.fileList = fileList;
            let List = [];
            this.fileList.forEach(item => {
                if(item.response!=undefined){
                    List.push(item.response.data)
                }
            });
            this.form1.picc = List.join(',');
        },
        // 婚礼策划新增款式
        handleAddhlch() {
            this.open5 = true;
            this.title5 = '新增款式';
            this.$nextTick(() => {
                this.$refs["form3"].resetFields()
            })
        },
        xinzenghlch() {
            this.$refs["form3"].validate(valid => {
                if (valid) {
                    addxilie(this.form3).then(response => {
                        this.form3 = {
                            typepic: '',
                            typename: '',
                            shopid: this.$route.query.shopid,
                        },
                            this.$modal.msgSuccess(response.data.msg);
                        this.open5 = false;
                        this.getList();
                    })
                }
            })
        },
        hlchSuccess(res, file) {
            this.form3.typepic = res.data
            this.isShowJinDuTiao4 = false;
            this.percentage4 = 0;
        },
        hlchUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            this.isShowJinDuTiao4 = true;
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
            let List = [];
            this.fileList.forEach(item => {
                List.push(item.response.data)
            });
            this.form1.picc = List.join(',')
        },
        handlePreview(response, file, fileList) {
            this.fileList = fileList;
            let List = [];
            this.fileList.map(item => {
                if(item.response!=undefined){
                    List.push(item.response.data)
                }
            });
            this.form1.picc = List.join(',');
        },
        // 婚纱摄影查看客片
        chakankp: function (row) {
            this.$router.push({
                name: 'chakan',
                query: { typeid: row.typeid }
            })
        },
        // 婚纱摄影查看样片
        chakanyp: function (row) {
            this.$router.push({
                name: 'chakanyp',
                query: { typeid: row.typeid }
            })
        },
        // 婚纱礼服查看样片
        hslfyp: function (row) {
            this.$router.push({
                name: 'hslfyp',
                query: { typeid: row.typeid, shopid: this.form.shopid }
            })
        },
        // 婚礼策划查看样片
        hlchyp: function (row) {
            this.$router.push({
                name: 'hlchyp',
                query: { typeid: row.typeid }
            })
        },
        // 婚宴酒店查看
        hyjdchakan: function (row) {
            this.$router.push({
                name: 'hyjdchakan',
                query: { typeid: row.typeid }
            })
        },
        // 删除系列
        handledelete(row) {
            this.date.typeid = row.typeid;
            deletexilie(this.date).then(response => {
                this.$modal.msgSuccess(response.data.msg)
                this.getList();
            })
        },
        // 修改系列
        handleupdate(row) {
            this.open6 = true;
            this.title6 = "修改"
            this.date1.typeid = row.typeid;
            selectxiliexiangqing(this.date1).then(response => {
                this.form5 = response.data.data;
            })
        },
        xiugai() {
            updateOnexilie(this.form5).then(response => {
                this.open6 = false;
                this.getList();
            })
        },
        xiugaiSuccess(res, file) {
            this.form5.typepic = res.data
            this.isShowJinDuTiao5 = false;
            this.percentage5 = 0;
        },
        xiugaiUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            this.isShowJinDuTiao5 = true;
        },
        look(row) {
            this.srcList.push(row.typepic)
        }
    }
}
</script>
<style scoped>
.jdt {
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.6);
}

.avatar-uploader .el-upload {
    border: 1px solid #8c939d;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    border: 1px solid #8c939d;
}

.avatar {
    width: 78px;
    height: 78px;
    display: block;
}
</style>
  